<template>
  <div style="display:flex;flex-direction:column;height:100%">
    <el-card>
      <div slot="header">
        <span style="color: #8497b3">预约管理</span>
      </div>

      <el-form :model="form" ref="form" class="put">
        <!-- 用户姓名 -->
        <el-form-item prop="username" class="input" label="用户姓名">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item prop="phone" class="input" label="手机号码">
          <el-input v-model="form.phone" />
        </el-form-item>

        <el-form-item prop="createtime" class="input" label="创建时间">
          <el-input v-model="form.createtime" />
        </el-form-item>

        <div style="display: flex; width: 200px;">
        
            <el-button type="info" @click="reset('form')">重置</el-button>
         

          
            <el-button @click="search">搜索</el-button>
          
        </div>
      </el-form>
    </el-card>

    <el-card style="margin-top:5px;flex:1">
      <el-menu mode="horizontal" default-active="1" >
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="2">启用</el-menu-item>
        <el-menu-item index="3">禁用</el-menu-item>
      </el-menu>

      <template>
        <el-table :data="usernames" stripe style="width: 100%">
          <el-table-column prop="username" label="用户姓名"> </el-table-column>
          <el-table-column prop="orderstate" label="预约情况">
          </el-table-column>
          <el-table-column prop="houseid" label="房屋编号"> </el-table-column>

          <el-table-column prop="ordertime" label="预约时间"> </el-table-column>

          <el-table-column prop="userphone" label="电话"> </el-table-column>

          <el-table-column prop="record" label="记录装态"> </el-table-column>

          <el-table-column prop="management" label="管理员"> </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template> 
<script>
export default {
  data() {
    return {
      form: {
        username: "",
        phone: "",
        createtime: "",
      },
      usernames: [], //用户信息
    };
  },
  methods: {
    /** 用户信息 */
    search() {
      //  let url="http://localhost:3000/user"
      //  myaxios.get(url,{username:this.username,phone:this.phone,createtime:this.createtime}).then(res=>{
      //     console.log(res);
      //     //请求到的数据存入
      //     this.usernames=res.data
      //   })
    },
    reset(form) {
      this.$refs[form].resetFields();
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.put {
  display: flex;
  margin: 0 20px 0 20px;
}
.input {
  width: 300px;
  display: flex;
  margin: 0 20px;
}
.el-menu--horizontal > .el-menu-item {
  margin-right: 50px;
}
.el-form-item__label {
  min-width: 70px;
}
</style>
